<template>
    <div>
        <!--轮播图-->
        <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in imgList" :key="item.id">
            <img :src="item.img" alt="">
        </mt-swipe-item>
        </mt-swipe>
        <!--改造mui的九宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/home">
                    <span class="mui-icon mui-icon-home"></span>
                    <div class="mui-media-body">Home</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/email">
                    <span class="mui-icon mui-icon-email">
                        <span class="mui-badge">5</span>
                    </span>
                    <div class="mui-media-body">Email</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/chat">
                    <span class="mui-icon mui-icon-chat">
                        <span class="mui-badge">0</span>
                    </span>
                    <div class="mui-media-body">Chat</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/location">
                    <span class="mui-icon mui-icon-location"></span>
                    <div class="mui-media-body">location</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/trend">
                    <span class="mui-icon-extra mui-icon-extra-trend"></span>
                    <div class="mui-media-body">Trend</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/phone">
                    <span class="mui-icon mui-icon-phone">
                        <span class="mui-badge">0</span>
                    </span>
                    <div class="mui-media-body">Phone</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/set">
                    <span class="mui-icon mui-icon-gear"></span>
                    <div class="mui-media-body">Setting</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/about">
                    <span class="mui-icon mui-icon-info"></span>
                    <div class="mui-media-body">about</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><router-link to="/more">
                    <span class="mui-icon mui-icon-more"></span>
                    <div class="mui-media-body">more</div></router-link></li>
        </ul> 

        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data () {
        return {
            imgList : [],
        }
    },
    created() {
        this.getList();
    },
    methods : {
        getList() {
            this.imgList = [
                { id:1, img: '../../images/1.jpg' },
                { id:2, img: '../../images/2.jpg' },
                { id:3, img: '../../images/3.jpg' }
            ]
        }
    }
}
</script>

<style scoped>
.mint-swipe{
    width: 100%;
    height: 20vh;
    overflow: hidden;
    position: relative;
}
.mint-swipe-item img{
    width: 100%;
    height: 100%;
}
.mui-grid-view.mui-grid-9 .mui-media {
    color: #333;
}
.mui-grid-view.mui-grid-9{
    background-color: #fff;
    border: none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: 0;
}
.mui-icon-extra {
    font-size: 2.4em;
    position: relative;
}
</style>